import { useMemo, memo } from 'react'
import './SonCounter.css'
export const SonCounter =  memo((props) => {
    // 当输入参数中的 sonCount 变化时，useMemo中的函数才会执行
    // 如果该函数不被 useMemo 包裹，每次父组件渲染都会重新渲染子组件，导致函数重复执行
     const myCount =useMemo(() => {
        console.log('Son caculated');
        return props.sonCount * 10
    },[props.sonCount]) 

    console.log('SonCounter rendered')

    props.passFunction()
    return (
        <div className='son'>
            <div>Here is SonCounter. My received count is {props.sonCount}</div>
            <div>My progressed result is {myCount}</div>
        </div>
    )
})